<template>
  <el-dialog
    ref="dialog"
    :title="title"
    :model-value="modelValue"
    :width="width"
    :destroy-on-close="destroyOnClose"
    :center="center"
    :fullscreen="fullscreen"
    :append-to-body="appendToBody"
    :top="top"
    :modal="modal"
    :lock-scroll="lockScroll"
    :custom-class="customClass"
    :open-delay="openDelay"
    :close-delay="closeDelay"
    :close-on-click-modal="closeOnClickModal"
    :close-on-press-escape="closeOnPressEscape"
    :show-close="showClose"
    @close="customEmit('close')"
  >
    <template v-if="showTitle" #title>
      <div class="custom-title-container">
        {{ title }}
        <el-button
          v-if="showFullscreen"
          type="text"
          class="custom-title-btn"
          @click="changeFullscreen"
        >
          <svg-icon
            icon-class="fullscreen"
            color="#909399"
            hover-color="#409EFF"
          ></svg-icon>
        </el-button>
      </div>
    </template>
    <template v-else #title>
      <slot name="title"></slot>
    </template>
    <slot />

    <template #footer>
      <slot name="footer"></slot>
    </template>
  </el-dialog>
</template>
<script lang='ts'>
/**
 * 说明:
 * emit:
 *
 * 创建时间: 2021-03-05
 * 创建者: Q
 */
import { defineComponent, computed, ref, onMounted } from "vue";

export default defineComponent({
  name: "CustomDialog",
  props: {
    modelValue: Boolean,
    title: {
      type: String,
      default: "",
    },
    width: {
      type: String,
      default: "40%",
    },
    center: {
      type: Boolean,
      default: true,
    },
    destroyOnClose: {
      type: Boolean,
      default: false,
    },
    showFullscreen: {
      type: Boolean,
      default: false,
    },
    modal: {
      type: Boolean,
      default: true,
    },
    appendToBody: {
      type: Boolean,
      default: false,
    },
    lockScroll: {
      type: Boolean,
      default: true,
    },
    closeOnClickModal: {
      type: Boolean,
      default: true,
    },
    closeOnPressEscape: {
      type: Boolean,
      default: true,
    },
    showClose: {
      type: Boolean,
      default: true,
    },
    top: {
      type: String,
    },
    customClass: {
      type: String,
    },
    openDelay: {
      type: Number,
    },
    closeDelay: {
      type: Number,
    },
  },
  setup(_props, ctx) {
    let showDialog: boolean = false;
    function customEmit(type: string) {
      if (type === "close") {
        ctx.emit("update:modelValue", false);
      }
    }
    const showTitle = computed(() => {
      return ctx.slots.title == null;
    });

    // 全屏部分
    // 抓取的dom 用于全屏时位置的调整
    let dragDomTemp, marginLeftTemp;
    const fullscreen = ref(false);
    function changeFullscreen() {
      if (fullscreen.value) {
        // 关闭全屏时
        if (marginLeftTemp) {
          dragDomTemp.style.marginLeft = marginLeftTemp;
        }
      } else {
        // 打开全屏时
        if (dragDomTemp?.style?.marginLeft) {
          marginLeftTemp = dragDomTemp.style.marginLeft;
          dragDomTemp.style.marginLeft = 0;
        }
      }
      fullscreen.value = !fullscreen.value;
    }

    let dialog = ref(null);

    onMounted(() => {
      initMove();
    });

    function initMove() {
      let draging = false;
      let dragDom: HTMLElement | null;
      let dragpoint: { x: number; y: number };
      const el = (dialog.value as any)?.dialogRef;
      if (el == null) return;
      let dialogHeaderEl = el.querySelector(
        ".el-dialog__header"
      ) as HTMLElement;
      // dialogHeaderEl.style.cssText += ";cursor:move;";
      dialogHeaderEl?.classList.add("dialog-move");
      let elStyle = el.currentStyle || window.getComputedStyle(el, null);

      const screenWidth = document.body.clientWidth;
      const screenHeight = document.body.clientHeight;
      let elWidth: number;
      if (elStyle.width.endsWith("%")) {
        elWidth =
          (screenWidth *
            parseFloat(elStyle.width.substr(0, elStyle.width.length - 1))) /
          100;
      } else {
        elWidth = parseFloat(elStyle.width);
      }

      // let elWidth = el

      dialogHeaderEl.addEventListener("mousedown", (ev: MouseEvent) => {
        draging = true;
        dragDom = el;
        dragDomTemp = dragDom;
        //自定义样式，让弹窗在拖拽过程中鼠标指针变成十字移动
        // dialogHeaderEl?.classList.remove("dialog-move");
        dialogHeaderEl?.classList.add("dialog-dragging");
        dragpoint = {
          x: ev.clientX,
          y: ev.clientY,
        };
      });

      el.addEventListener("mouseup", () => {
        draging = false;
        dialogHeaderEl?.classList.remove("dialog-dragging");
        dragDom = null;
      });

      el.addEventListener("mousemove", (ev: MouseEvent) => {
        if (draging) {
          let _dragdom = dragDom as HTMLElement;
          let sty =
            // @ts-ignore
            _dragdom.currentStyle || window.getComputedStyle(_dragdom, null);
          let marginLeft =
            parseFloat(sty.marginLeft) + ev.clientX - dragpoint.x;
          if (marginLeft <= 0) {
            marginLeft = 0;
            draging = false;
            dialogHeaderEl?.classList.remove("dialog-dragging");
          }
          if (marginLeft > screenWidth - elWidth) {
            marginLeft = screenWidth - elWidth;
            draging = false;
            dialogHeaderEl?.classList.remove("dialog-dragging");
          }

          _dragdom.style.marginLeft = `${marginLeft}px`;

          let marginTop = parseFloat(sty.marginTop) + ev.clientY - dragpoint.y;
          if (marginTop < 0) {
            marginTop = 0;
            draging = false;
            dialogHeaderEl?.classList.remove("dialog-dragging");
          }
          if (marginTop > screenHeight - 220) {
            marginTop = screenHeight - 220;
            draging = false;
            dialogHeaderEl?.classList.remove("dialog-dragging");
          }
          _dragdom.style.marginTop = `${marginTop}px`;

          dragpoint = {
            x: ev.clientX,
            y: ev.clientY,
          };
        }
      });
    }

    return {
      showDialog,
      customEmit,
      showTitle,
      changeFullscreen,
      fullscreen,
      dialog,
    };
  },
});
</script>

<style lang='scss' scoped>
.custom-title-container {
  position: relative;
  .custom-title-btn {
    position: absolute;
    min-height: auto !important;
    padding: 0;
    right: 24px;
    top: -1px;
  }
}
</style>
<style>
.dialog-move {
  cursor: move;
}
.dialog-dragging {
  background-color: rgba(0, 0, 0, 0.2);
  cursor: grabbing !important;
}
.el-dialog__header {
  box-shadow: 0 2px 2px 0 #dddddd;
}
</style>